<template>
  <div class="simple-time-line">
    <ActivityPanel title="时间轴" :position="position">
      <div class="time-bar">
        <div :class="{ 'show-index': true, active: isPlaying }">
          {{ timeIndex }}
        </div>
        <el-button @click="go">前进</el-button>
        <el-button @click="back">后退</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button @click="play">播放</el-button>
        <el-button @click="pause">暂停</el-button>
      </div>
    </ActivityPanel>
  </div>
</template>

<script setup>
import { onMounted, nextTick, ref, watchEffect, watch } from "vue";
import ActivityPanel from "@/components/ActivityPanel.vue";

const { position } = defineProps({
  position: {
    type: Object,
    default: () => ({
      top: "500px",
      left: "10px",
    }),
  },
});

const $emit = defineEmits(["change"]);

const timeIndex = ref(0);
const timer = ref(null);
const interval = 3000;
const isPlaying = ref(false);

// 时间轴
function go() {
  timeIndex.value++;
}

function back() {
  if (timeIndex.value > 0) {
    timeIndex.value--;
  }
}

function reset() {
  timeIndex.value = 0;
}

function play() {
  isPlaying.value = true;
  timer.value = setInterval(() => {
    timeIndex.value++;
  }, interval);
}

function pause() {
  isPlaying.value = false;
  clearInterval(timer.value);
}

watch(timeIndex, () => {
  $emit("change", timeIndex.value);
});
</script>

<style lang="less" scoped>
.simple-time-line {
  .time-bar {
    .show-index {
      margin: 10px, 0;

      font-weight: bold;
      font-size: 20px;
      color: red;
      &.active {
        color: green;
      }
    }
  }
}
</style>
